<template>
  <div id="dataWrap"></div>
</template>

<script>
import 'echarts-liquidfill';

export default {
  name: "EnvirData",
  data() {
    return {}
  },

  props: {
    isShowGaugeText: {
      type: Boolean,
      default: false
    }
  },

  watch: {
    isShowGaugeText(val) {
      this.initData(val)
    }
  },

  mounted() {
    this.initData();
  },

  methods: {
    initData(data) {
      let text = '--';
      if (data) {
        text = data ? "超标" : "未超标"
      } else {
        text = '--';
      }
      var echarts = require('echarts');
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('dataWrap'));
      let option = {
        title: {
          text: text,
          textStyle: {
            fontSize: 26,
            fontFamily: 'Microsoft Yahei',
            fontWeight: 'normal',
            color: '#ffffff',
            rich: {
              a: {
                fontSize: 26,
              }
            }
          },
          x: 'center',
          y: '30%'
        },
        graphic: [{
          type: 'group',
          left: 'center',
          top: '60%',
          children: [{
            type: 'text',
            z: 100,
            left: '10',
            top: 'middle',
            style: {
              fill: '#ffffff',
              text: '环境质量',
              font: '15px Microsoft YaHei'
            }
          }]
        }],
        series: [{
          type: 'liquidFill',
          radius: '80%',
          center: ['50%', '50%'],
          data: [0],
          backgroundStyle: {
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0.5,
              y2: 1,
              colorStops: [{
                offset: 1,
                color: 'rgba(243, 144, 57, 0.25)'
              }, {
                offset: 0.5,
                color: 'rgba(243, 144, 57, 0.5)'
              }, {
                offset: 0,
                color: 'rgba(243, 144, 57, 0.8)'
              }],
              globalCoord: false
            },
          },
          outline: {
            borderDistance: 0,
            itemStyle: {
              borderWidth: 8,
              borderColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(243, 144, 57, 0)'
                }, {
                  offset: 0.5,
                  color: 'rgba(243, 144, 57, .25)'
                }, {
                  offset: 1,
                  color: 'rgba(243, 144, 57, 0.8)'
                }],
                globalCoord: false
              },
              shadowBlur: 5,
              shadowColor: '#F39039',
            }
          },
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 1,
              color: 'rgba(150, 230, 161,0.1)'
            }, {
              offset: 0.5,
              color: 'rgba(150, 230, 161, .3)'
            }, {
              offset: 0,
              color: 'rgba(150, 230, 161, 1)'
            }],
            globalCoord: false
          },
          label: {
            normal: {
              formatter: '',
            }
          }
        }]
      };

      myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
#dataWrap {
  width: 100%;
  height: 100%;
}
</style>
